<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 柱形图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
  var myChart = echarts.init(document.getElementById('main'));

  var option = {
    title: {
      text: '柱形图示例',
      show: false // 不显示title
    },
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150, 230, 224, 218, 135],
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            {offset: 0, color: 'rgba(81, 135, 238, 1)'},    // 渐变色起始颜色
            {offset: 1, color: 'rgba(70, 205, 197, 1)'}     // 渐变色结束颜色
          ]
        ),
        barBorderRadius: [15, 15, 0, 0] // 设置柱形图两端的曲率圆角效果
      }
    }]
  };

  myChart.setOption(option);
</script>
</body>
</html>
